<template>
  <div>
    <div class="inputWrapper">
      <!-- 未激活状态 -->
      <div class="disabled" v-if="!isShowTextarea">
        <input type="text" placeholder="写评论" @focus="handleTextarea" />
        <div class="commentWrapper" @click="$router.push('/morecomment/'+$route.params.id)">
          <span class="iconfont iconpinglun-"></span>
          <div class="num" :style="{background: $colorObj.color}">{{ commentLength }}</div>
        </div>
        <span
          class="iconfont iconshoucang"
          :style="{color: isStar ? $colorObj.color : ''}"
          @click="handleStar"
        ></span>
        <span class="iconfont iconfenxiang" @click="showShare = true"></span>
      </div>

      <!-- 激活状态 -->
      <div class="enabled" v-if="isShowTextarea">
        <textarea :placeholder="placeholder()" ref="textarea" @blur="handleBlur" v-model="content"></textarea>
        <div class="send" :style="{background: $colorObj.color}" @click="send">发送</div>
      </div>
    </div>

    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowTextarea: false,
      content: "",
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      showShare: false,
      isStar: this.has_star,
    };
  },
  watch: {
    has_star() {
      this.isStar = this.has_star;
    },
  },
  props: ["parentInfo", "commentLength", "has_star"],
  methods: {
    placeholder() {
      if (this.parentInfo.name) {
        return "回复@" + this.parentInfo.name;
      } else {
        return "写评论";
      }
    },
    handleBlur() {
      setTimeout(() => {
        this.isShowTextarea = false;
        this.parentInfo.id = "";
        this.parentInfo.name = "";
      }, 50);
    },
    handleTextarea() {
      this.isShowTextarea = true;
      // 在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后）
      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    send() {
      const data = {
        content: this.content,
      };
      if (this.parentInfo.id) {
        data.parent_id = this.parentInfo.id;
      }
      this.$axios({
        url: "post_comment/" + this.$route.params.id,
        method: "post",
        data,
      }).then((res) => {
        if (res.data.message == "评论发布成功") {
          this.$emit("loadComment");
          // 发布成功后清空文本域
          this.content = "";
        }
      });
    },
    onSelect(option) {
      this.$toast.success(option.name);
      this.showShare = false;
    },
    handleStar() {
      this.$axios({
        url: "/post_star/" + this.$route.params.id,
      }).then((res) => {
        if (res.data.message === "收藏成功") {
          this.$toast.success(res.data.message);
          this.isStar = true;
        } else if (res.data.message === "取消成功") {
          this.$toast.success(res.data.message);
          this.isStar = false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.inputWrapper {
  padding: 12 / 360 * 100vw;
  background-color: #eee;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.disabled {
  display: flex;
  align-items: center;
  // box-sizing: border-box;
  justify-content: space-between;
  input {
    height: 30 / 360 * 100vw;
    padding-left: 16 / 360 * 100vw;
    border-radius: 16 / 360 * 100vw;
    font-size: 14 / 360 * 100vw;
    border: none;
    outline: none;
    background-color: #ddd;
  }
  .iconfont {
    font-size: 24 / 360 * 100vw;
  }
  .commentWrapper {
    position: relative;
    .num {
      position: absolute;
      top: -10 / 360 * 100vw;
      left: 0;
      padding: 4 / 360 * 100vw 6 / 360 * 100vw;
      border-radius: 14 / 360 * 100vw;
      font-size: 12 / 360 * 100vw;
      color: #fff;
      transform: scale(0.8);
    }
  }
}
.enabled {
  display: flex;
  align-items: flex-end;
  textarea {
    width: 220 / 360 * 100vw;
    font-size: 14 / 360 * 100vw;
    height: 60 / 360 * 100vw;
    resize: none;
    border-radius: 10 / 360 * 100vw;
    padding: 10 / 360 * 100vw;
    background-color: #ddd;
  }
  .send {
    height: 26 / 360 * 100vw;
    line-height: 26 / 360 * 100vw;
    border-radius: 16 / 360 * 100vw;
    padding: 0 14 / 360 * 100vw;
    color: #fff;
    margin-left: 10 / 360 * 100vw;
    font-size: 12 / 360 * 100vw;
  }
}
</style>